<div class="header"><span>{:date('H:i')}</span></div>
<div class="container">
    <div class="logo">A</div>
    <div class="content arrow">
        <a class="icon icon-volume left-text">
            <i class="fa fa-music"></i>
        </a>
        <a href="javascript:void(0)" id="audio_btn" class="icon fa fa-play-circle-o">

        </a>
        <audio id="audio">
            <source src="{$url|default=''}">
        </audio>
        <script>
            var audio = document.getElementById('audio');
            var button = document.getElementById('audio_btn');
            setInterval(function () {
                button.className = audio.paused ? 'icon icon-play fa fa-play-circle-o' : 'icon icon-pause fa fa-pause';
            }, 500);
            button.onclick = function () {
                audio.paused ? audio.play() : audio.pause()
            }
        </script>
    </div>
</div>
<style>

    .container .logo {
        position: absolute;
        top: 0;
        display: inline-block;
        width: 2.5rem;
        height: 2.5rem;
        border-radius: 50%;
        background: #098;
        color: #fff;
        content: 'A';
        text-align: center;
        font-size: .8rem;
        line-height: 2.5rem;
    }
    .header {
        margin-top: 15px;
        text-align: center
    }

    .header span {
        padding: 5px;
        font-size: 8px;
        background: #ccc;
        border-radius: 10%
    }
    .container {
        position: relative;
        display: block;
        margin: 5vw auto;
        width: 90%;
        color: #333;
        text-overflow: ellipsis;
    }
    .left-text {
        margin: 0 !important;
        color: #ccc !important
    }

    .icon {
        color: #666;
        font-size: 1.5rem;
        margin-left: 2.5rem;
        line-height: 1.5rem;
        font-style: normal;
        -webkit-font-smoothing: antialiased;
    }
    .container .content {
        position: relative;
        left: 3.4rem;
        display: inline-block;
        padding: .8rem .8rem .8rem;
        max-width: 54vw;
        border: 1px solid #ccc;
        border-radius: .25rem;
        background: #fff;
        font-size: .7rem;
        line-height: 1.5em;
    }
</style>